<template>
  <div class="caregiver-layout">
    <div class="nav-header">
      <el-menu
        mode="horizontal"
        :router="true"
        :default-active="activeMenu"
        class="nav-menu"
      >
        <el-menu-item index="/caregiver/apply">陪护申请</el-menu-item>
        <el-menu-item index="/caregiver/online-answer">在线回答</el-menu-item>
        <el-menu-item index="/caregiver/profile">个人信息</el-menu-item>
      </el-menu>
    </div>
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const activeMenu = computed(() => route.path)
</script>

<style scoped>
.caregiver-layout {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.nav-header {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.nav-menu {
  max-width: 1200px;
  margin: 0 auto;
  border-bottom: none;
}

.main-content {
  max-width: 1200px;
  margin: 80px auto 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu-item) {
  font-size: 16px;
  height: 60px;
  line-height: 60px;
}

:deep(.el-menu-item.is-active) {
  font-weight: bold;
}
</style> 